import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { redux } from '@ohif/core';
import { useTranslation } from 'react-i18next';
import { List, Button, Input, InputNumber, Typography, notification } from 'antd';
import cloneDeep from 'lodash.clonedeep';

import './WLPresets.styl';

const { setWLPresets } = redux.actions;
const { defaultWLPresets } = redux.defaultPreferences;

function WLPresets({ onSaveCallback }) {
  const { t } = useTranslation("Preferences");
  const dispatch = useDispatch();

  const presetsData = useSelector(state => {
    const { preferences = {} } = state;
    const { wlPresets } = preferences;
    return wlPresets;
  });

  const [presets, setPresets] = useState(cloneDeep(presetsData));

  const onReset = () => { setPresets(cloneDeep(defaultWLPresets)); };

  const onSave = () => {
    dispatch(setWLPresets(presets));
    notification.success({ message: t('Saved Successfully.'), duration: 2 });

    if (onSaveCallback) {
      onSaveCallback();
    }
  };

  const handleInputChange = (key, name, window, level) => {
    setPresets(prev => {
      const newWLs = [...prev];
      newWLs.forEach(wl => {
        if (wl.id === key) {
          wl.name = name;
          wl.window = window;
          wl.level = level;
        }
      });
      return newWLs;
    });
  };

  return (
    <div className="preference-wrapper">
      <div className="wlpresets-table">
        <div className="wlpresets-header">
          <Typography.Text className="header-no">{t("No.")}</Typography.Text>
          <Typography.Text className="header-name">{t("Name")}</Typography.Text>
          <Typography.Text className="header-window">{t("Window")}</Typography.Text>
          <Typography.Text className="header-level">{t("Level")}</Typography.Text>
        </div>
        <List
          className="wlpresets-list"
          dataSource={presets}
          renderItem={item => {
            const handleNameChange = event => {
              handleInputChange(item.id, event.target.value, item.window, item.level);
            };
            const handleWindowChange = window => {
              handleInputChange(item.id, item.name, window, item.level);
            };
            const handleLevelChange = level => {
              handleInputChange(item.id, item.name, item.window, level);
            };
            return (
              <List.Item>
                <Typography.Text className="item-no">{item.id}</Typography.Text>
                <Input
                  className="item-name"
                  value={item.name}
                  onChange={handleNameChange}
                />
                <InputNumber
                  value={item.window}
                  onChange={handleWindowChange}
                />
                <InputNumber
                  value={item.level}
                  onChange={handleLevelChange}
                />
              </List.Item>
            );
          }}
        />
      </div>
      <div className="wlpresets-btn">
        <Button onClick={onReset}>
          {t("Reset")}
        </Button>
        <Button onClick={onSave}>
          {t("Save")}
        </Button>
      </div>
    </div>
  );
}

export default WLPresets;
